<template>
  <!-- 银行流水 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="129px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '150px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="400px">
          <a-form-item label="所属栏目" :label-col="{ style: { width: '80px' } }" :wrapper-col="{ span: 24 }">
            <ApiTreeSelect
              :api="menuList"
              :value="queryParam.menuentityId"
              :dropdownStyle="{ maxHeight: '500px', overflow: 'auto', width: '500px' }"
              :fieldNames="{ children: 'children', label: 'name', key: 'id', value: 'id' }"
              :treeDefaultExpandAll="true"
              allowClear
              @select="onSelect"
            >
            </ApiTreeSelect>
          </a-form-item>
        </a-col>

        <a-col flex="250px">
          <a-form-item label="标题" :label-col="{ style: { width: '60px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value.trim="queryParam.title"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:180px;">
          <span style="float:right;overflow:hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" :indexColumnProps="indexColumnProps">
    <template #tableTitle>
      <a-button type="primary" color="success" @click="addoperation" preIcon="ant-design:plus-outlined" class="ml-10px">新增</a-button>
      <a-button type="primary" preIcon="ant-design:form-outlined" @click="editoperation" :disabled="buttonOption.puhButton">编辑</a-button>
      <a-button type="primary" color="success" preIcon="ant-design:edit-outlined" @click="daysoperation" :disabled="buttonOption.dayButton">天数</a-button>
      <a-button type="primary" color="warning" preIcon="ant-design:copy-outlined" @click="copyoperation" :disabled="buttonOption.copButton">复制</a-button>
      <PopConfirmButton type="primary" color="success" title="确定启用？" okText="确定" cancelText="取消" preIcon="ant-design:setting-outlined" @confirm="stateoperation" :disabled="buttonOption.staButton">启用</PopConfirmButton>
      <PopConfirmButton type="primary" color="error" title="确定禁用？" okText="确定" cancelText="取消" preIcon="ant-design:instagram-outlined" @confirm="stateoperation" :disabled="buttonOption.clsButton">禁用</PopConfirmButton>
      <PopConfirmButton type="primary" color="error" title="是否确认删除？" okText="确定" cancelText="取消" preIcon="ant-design:delete-twotone" @confirm="deloperation" :disabled="buttonOption.delButton">删除</PopConfirmButton>
    </template>
  </BasicTable>
  <!-- table区域-end-->

  <CmsArticleDetail @register="registerCmsArticleDetail" @success="reload"></CmsArticleDetail>
  <CmsArticleAdd @register="registerCmsArticleAdd" @success="reload"></CmsArticleAdd>
  <CmsArticleCopy @register="registerCmsArticleCopy" @success="reload"></CmsArticleCopy>

</template>

<script lang="ts" setup name="article-CmsArtcleList">
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { list, del, updateState, testMember } from "/@/views/weixin/article/artticle.api";
import { list as menuList } from "/@/views/weixin/menu/menu.api";
import { ApiTreeSelect } from '/@/components/Form';
import { PopConfirmButton } from '/@/components/Button';
import { render } from "/@/utils/common/renderUtils";
import { useMessage } from "/@/hooks/web/useMessage";

import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import CmsArticleAdd from './modules/CmsArticleAdd.vue';
import CmsArticleCopy from './modules/CmsArticleCopy.vue';
import CmsArticleDetail from './modules/CmsArticleDetail.vue';

const $message = useMessage();
//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive({
  ddlxIds: [],
  menuentityId: "",
  title: ""
})

const buttonOption = reactive<any>({
  puhButton: true,  //编辑
  dayButton: true,  //天数
  copButton: true,  //复制
  staButton: true,  //启开
  clsButton: true,  //禁用
  delButton: true,  //删除
});

const treeData = reactive({})

function titleFmt(value, row) {
  return row.number + ":【" + row.sub + "】" +row.title;
}

function lineDaysFmt(value, row, index) {
  var lineDays = "";
  if (typeof value != 'undefined' && value != '') {
    lineDays = value + "天"
  }
  return lineDays;
}

//订单列表 - 状态转译
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  const color = text == '0' ? 'green' : text == '1' ? 'red' : 'gray';
  return render.renderTag(render.renderDict(text, 'stateType'), color)
}

//订单列表 - 表头
const columns: BasicColumn[] = [
  {title: '状态', dataIndex: 'state', width: 30, customRender: statusFmt,},
  {
    title: '部门',
    dataIndex: 'ddlx',
    width: 30,
    customRender: ({text}) => render.renderDict(text, 'ddlxType')
  },
  { title: "线路名称", dataIndex: "title", align: "left", width: 250 }, //, customRender: titleFmt
  { title: "所属栏目", dataIndex: "menuName", align: "left", width: 80}, //, customRender:({text}) => render.renderDict(text, 'weixin_menuentity,id,name')
  { title: "行程", dataIndex: "days", align: "center", width: 23 }, //, customRender: lineDaysFmt
  { title: "截止", dataIndex: "isGuestEnd", align: "center", width: 23 }, //, customRender: lineDaysFmt
  { title: "阅读量", dataIndex: "hits", align: "center", width: 30 },
  { title: "操作人", dataIndex: "createName", align: "center", width: 40 },
  { title: "操作时间", dataIndex: "updateDate", align: "center", format: "date|YYYY-MM-DD HH:mm", width: 80 },
  { title: "排序", dataIndex: "orders", align: "center", width: 30 },
]

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
  reload();
}

// 列表页面公共参数、方法
const {prefixCls, tableContext, onImportXls} = useListPage({
  designScope: 'article-CmsArtcleList',
  tableProps: {
    api: list,
    columns: columns,
    showTableSetting: false,
    showIndexColumn: true,    //行号
    useSearchForm: false,
    showSummary: false,
    showActionColumn: false,
    // actionColumn: {
    //   width: 160,
    // },
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext
//复制行程
const [registerCmsArticleCopy, {openModal: openCmsArticleCopy}] = useModal();
//编辑
const [registerCmsArticleDetail, {openModal: openCmsArticleDetail}] = useModal();
//新增
const [registerCmsArticleAdd, {openModal: openCmsArticleAdd}] = useModal();

const indexColumnProps = {
  dataIndex: "index",
  width: "15px"
};


//单击行
let selectRows = reactive<any>({id: '', state: '', ddlx: ''});
function handleClick(record) {
  selectRows.id = record.id;
  selectRows.state = record.state;
  selectRows.ddlx = record.ddlx;
  refreshOrderButton();
}

//按数据状态，启用禁用界面所有表单属性
function refreshOrderButton() {
  let state = selectRows.state;
  if (state == '1') {
    //启用
    buttonOption.staButton = true;  //启开
    buttonOption.clsButton = false; //禁用
    buttonOption.delButton = true;  //删除
  } else if (state == '0') {
    //禁用
    buttonOption.staButton = false;  //启开
    buttonOption.clsButton = true;   //禁用
    buttonOption.delButton = false;  //删除
  }

  let ddlx = selectRows.ddlx;
  if (ddlx == null) {
    //部门为空
    buttonOption.puhButton = true;  //编辑
    buttonOption.dayButton = false; //天数
    buttonOption.copButton = true;  //复制
  } else {
    //部门不空
    buttonOption.puhButton = false; //编辑
    buttonOption.dayButton = false; //天数
    buttonOption.copButton = false; //复制
  }
  //console.info(ddlx == null, !ddlx)
}


/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    { label: "复制", color: "warning", icon: "ant-design:copy-outlined", onClick: copyoperation.bind(null, record) },
    { label: "发布", color: "success", icon: "ant-design:form-outlined", onClick: editoperation.bind(null, record) },
    {
      label: "编辑",
      icon: "ant-design:clock-circle-outlined",
      onClick: daysoperation.bind(null, record)
    },
    {
      label: "启用",
      icon: "ant-design:setting-outlined",
      onClick: stateoperation.bind(null, record),
      color: "success",
      ifShow: record.state == "1"
    },
    {
      label: "禁用",
      icon: "ant-design:setting-outlined",
      onClick: stateoperation.bind(null, record),
      color: "error",
      ifShow: record.state == "0"
    },
    {
      label: "删除",
      color: "error",
      icon: "ant-design:rest-twotone",
      popConfirm: {
        title: '是否确认删除',
        confirm: deloperation.bind(null, record),
      },
    }
  ];
}

//双击行
function handleDblclick(record) {
  editoperation(record)
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

//新增
function addoperation() {
  openCmsArticleAdd(true, { isUpdate: false });
}

//编辑内容
function editoperation(record: Recordable) {
  let ddlx = record.ddlx;
  Object.assign(record, selectRows)
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  if (ddlx == null) {
    openCmsArticleAdd(true, { isUpdate: true, id: selectRows.id });
  } else {
    openCmsArticleDetail(true, { isUpdate: false, id: selectRows.id });
  }
}

//复制行程
function copyoperation() {
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  openCmsArticleCopy(true, { isUpdate: true, id: selectRows.id });
}

//编辑天数
function daysoperation() {
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  openCmsArticleAdd(true, { isUpdate: true, id: selectRows.id });
}

/**
 * 删除事件
 */
async function deloperation() {
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  await del({id: selectRows.id}, reload);
}

/**
 * 禁用或启用
 */
async function stateoperation() {
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  await updateState({id: selectRows.id}, reload);
}

//新增编辑成功后，刷新列表
function modalFormOk() {
  searchQuery()
}

/**
 * 选中树节点事件
 */
function onSelect(value, node, extra)	 {
  if (node.children && node.children.length > 0) {
    return false;
  }
  queryParam.menuentityId = value;
}

function test() {
  const res = testMember()
  console.info(res)
}
</script>
<style scoped>

</style>
